<template>
    <div id="loginBox">
        <div id="loginHeadBox" class="goCenter">
            <div>
                <div>
                    <span style="font-size:80px;font-style:italic">welcome</span>
                </div>
                <div style="margin-top:20px" class="goCenter">
                    <span style="font-size:30px;border:1px solid #fff;padding:10px">后台管理系统</span>
                </div>
            </div>
        </div>
        <div id="loginMainBox"  class="goCenter">
            <div class="formBox goCenter" style="margin-top:20px" >
                <el-form :model="form" :rules="rules" ref="form" >
                    <el-form-item prop="name">
                        <el-input v-model="form.name" placeholder="请输入用户名..." clearable>
                            <i class="el-icon-user-solid" slot="suffix"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item  prop="password">
                        <el-input v-model="form.password" placeholder="请输入密码..." type="password" clearable show-password>
                            <i class="el-icon-lock" slot="suffix"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item  prop="yzm">
                        <div style="position:static">
                            <el-input v-model="form.yzm" placeholder="请输入验证码..." clearable>
                                <i class="el-icon-key" slot="suffix"></i>
                            </el-input>
                            <div style="position:absolute;top:0px;left:310px">
                                <identify></identify>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button style="width:400px" type="primary" @click="login">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        //校验验证码正确
        var validateYzm = (rule, value, callback) => {  
            var yzm= sessionStorage.getItem('identify');
            console.log(yzm);
            console.log(value);        
            if (value === '') {
                callback(new Error('请输入验证码'));
            } else if (value !== yzm) {
                callback(new Error('验证码输入错误！'));
            } else {
                callback();
            }
        };
        return{
            form:{
                name:'',
                password:'',
                yzm:'',
            },
            rules:{
                name:[
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                ],
                password:[
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ],
                yzm:[
                    {
                         validator: validateYzm,trigger:'blur'
                    }
                ]
            }
        }
    },
    mouted(){

    },
    methods:{
        login(){
              this.$refs['form'].validate((valid) => {
                if (valid) {
                        console.log('login ok');
                        var URL=this.IP+'/user/login';
                        console.log(URL);
                        this.$ajax({
                            method:'post',
                            url:URL,
                            data:{
                                username:this.form.name,
                                password:this.form.password
                            }
                        }).then(response=>{
                            console.log(response.data);
                            var code=response.data.code;
                            if(code==0){
                                this.$router.push({
                                    path:'/home/firstPage',       
                                })
                            }else{
                                console.log(response.data.msg);
                                this.$message.error(response.data.msg);
                            }
                        }).catch(error=>{
                            console.log(error);
                            //Toast(error);
                        })
                  
                } else {
                    console.log('error submit!!');
                }
            });
        }
    }
}
</script>
<style>
 #loginHeadBox{
    height:250px;
    background-color: #409EFF;
    width: 100%;
    color: #fff;
    
}
.goCenter{
    display: flex;
    justify-content: center;
    align-items: center;
}
.formBox{
    height: 300px;
    width: 400px;
  
}
</style>